<template>
  <div style="margin-top: 5px">
    <titleBox text="可视化资源" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div class="content-box" ref="content" style="padding:10px;border: 1px solid #11afc180;">
        <!-- <div class="jkbox" style="background-image: url('/img/myimg/lk/jk1.png'); "></div> -->
        <!-- <div class="jkbox" style="background-image: url('/img/myimg/lk/jk2.png')"></div> -->
        <!-- <div class="jkbox" style="background-image: url('/img/myimg/lk/jk3.png')"></div> -->
        <!-- <div class="jkbox" style="background-image: url('/img/myimg/lk/jk4.png')"></div> -->
        <div class="jkbox" v-for="(item, index) in videoData" :key="index">
          <video v-if="!item.show" :id="'video' + index" class="video-js1 video-js vjs-big-play-centered" autoplay
            controls></video>
          <div v-else class="jkbox-err">连接失败</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue"
import titleBox from "../mConponents/titleBox.vue"
import axios from "axios"
import videojs from "video.js"
import "video.js/dist/video-js.css"

onMounted(() => {
  getSp()
  // setInterval(() => {
  //   videoData.value = []
  //   players.value.forEach((item) => {
  //     if (item) {
  //       item.dispose()
  //     }
  //   })
  //   players.value = []
  //   getSp()
  // }, 60 * 1000)
})


onUnmounted(() => {
  players.value.forEach((item) => {
    if (item) {
      item.dispose()
    }
  })
})

const videoData = ref([])

const players = ref([])
const content = ref(null)
const height = ref(0)
const show = ref(false)
const getSp = async () => {
  axios({
    method: "post",
    url: "http://ylz.chuangxing.ren/api/index/ics_test6"
  }).then((res) => {
    videoData.value = res.data.data
    console.log("视屏", videoData.value)
    nextTick(() => {
      play()
      height.value = content.value.offsetHeight
      // show.value = true
    })
  })
}

const play = () => {
  videoData.value.forEach((item, index) => {
    players.value[index] = videojs(`video${index}`, {
      autoplay: true,
      muted: true,
      controls: true,
      sources: [
        {
          src: item.data.url,
          type: "application/x-mpegURL"
        }
      ]
    })
    players.value[index].on("error", () => {
      item.show = true
    })
  })
}
</script>
<style scoped lang="less">
.content {
  background-color: #001a1dcc;
  width: 330px;
  margin-top: 5px;


  .content-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .jkbox {
    width: calc(50% - 10px);
    background-size: 100% 100px;
    height: 100px;
    margin: 5px;
    position: relative;
    // background-color: #fff;
  }
}

.jkbox-err {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  line-height: 100px;
  background: rgba(0, 0, 0);
  z-index: 99999;
}

/* 覆盖默认样式 */
:deep(.video-js1) {
  width: 100%;
  height: 100px;
  position: relative;
}

:deep(.video-js1 .vjs-tech) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

:deep(.vjs-big-play-button) {
  background-color: rgba(66, 184, 131, 0.7);
  border: none;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  margin-left: -20px;
  margin-top: -20px;
}

:deep(.video-js1 .vjs-control-bar) {
  height: 20px;
  /* 默认16px，调小此值可等比缩小所有控件 */
}

:deep(.vjs-control-bar .vjs-control) {
  width: 2em;
}

:deep(.video-js1 .vjs-live-control) {
  display: none;
}

:deep(.video-js1 .vjs-volume-panel) {
  display: none;
}
</style>
